<template>
	<div class="industry1">
		<div class="industry1_left">
			<div class="industry1_title"> 
				<div class="title">
					<div class="title_line"></div>
					<div class="title_year">2019</div>
				</div>
				<div class="title1">
					<div class="title_line"></div>
					<div class="title_year">2020</div>
				</div>
			</div>
			<div class="industry1_list">
				<div class="list_item" v-for="(temp,index) in showstruct" :key="index">
					<div :class="temp.colori"></div>
					<div class="item_content">
						<div class="item_cTop">
							<div class="item_cTop_text">{{temp.name}}</div>
							<div class="item_cTop_text">{{temp.dt19}}</div>
							<div class="item_cTop_text">{{temp.dt20}}</div>
						</div>
						<div class="item_cBottom">
							<div class="item_cTop_text">(增值)</div>
							<div class="item_cTop_text">{{temp.up19}}</div>
							<div :class="index==0||index==3?'item_cTop_text1':'item_cTop_text'">{{temp.up20}}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="industry1_right">
			<div class="industry1_right_item">
				<industry1Ec :dataitem="toData2019"></industry1Ec>
			</div>
			<div class="industry1_right_item">
				<industry1Ecb :dataitem="toData2020"></industry1Ecb>
			</div>
		</div>
	</div>
</template>

<script>
	import industry1Ec from '../../components/industry/industryEc.vue'
	import industry1Ecb from '../../components/industry/industryEcb.vue'
	export default {
		name: 'industry1',
		data() {
			return{
				cockpitData:[],
				itemTitle:[],
				arrColor:["item_line","item_line activep","item_line activeo","item_line activeb"],
				showstruct:[],
				toData2019:[],
				toData2020:[]
			}
		},
		methods: {
			async getList(){
				var _this = this;
				//图表数据
				var dt = {
					"params": {
						"normGuid": "8bc1ae6c-7160-4f58-9b0c-ef0126e4b8ff",
						"fieldList": []
					}
				};
				const echartsData= await this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt)
				let {custom:{result}}={...echartsData}
				_this.getEchartsData(result)
				//表格数据数据
				var dt2 = {
					"params": {
						"normGuid": "cd36fbff-d2dc-4083-9854-d24d66879631",
						"fieldList": []
					}
				};
				const condata = await _this.$api.post('dcockpit/rest/cockpitApi/searchListNormResult', dt2)
				let {custom:{result:result1}}={...condata}
				_this.getTableData(result1)
			},
			getEchartsData(result){
				let dataList=result.cockpitData
				console.log('图表',dataList)
				let itemTitle = dataList.map(item=>{
					return item.index_name.slice(10,-6);
				});
				let itemData = dataList.map(item=>{
					return item.index_value.toFixed(2);
				});
				let data2019 = itemData.slice(5,10);
				let data2020 = itemData.slice(0,5);
				itemTitle.forEach((item,value)=>{
					this.toData2019.push({
						name:item.replace('材料','').replace('新','').replace('先进','').replace('细分领域',''),
						value:data2019[value]
					})
					this.toData2020.push({
						name:item.replace('材料','').replace('新','').replace('先进','').replace('细分领域',''),
						value:data2020[value]
					})
				})
				
			},
			getTableData(result){
				let dataList=result.cockpitData
				console.log('表格',dataList)
				let itemData = dataList.map(item=>{
					return item.index_value;
				});
				let itemTitle = dataList.map(item=>{
					return item.index_name.slice(10,-6);
				});
				let up19 = itemData.slice(0,5);
				let up20 = itemData.slice(5,10);
				
				itemTitle.slice(0,4).forEach((item,index)=>{
					let name=''
					if(index==0){
						name=item
					}else if(index==3){
						name=item.replace('新','')
					}else{
						name=item.replace('材料','').replace('新','').replace('先进','')
					}
					if(this.toData2019[index]!=undefined){
						this.showstruct.push({
							dt19:this.toData2019[index].value,
							dt20:this.toData2020[index].value,
							up19:up19[index]?up19[index].toFixed(2)+'%':0,
							up20:up20[index]?up20[index].toFixed(2)+'%':0,
							colori:this.arrColor[index],
							name:name
						})
					}
					
				})
			}
		}, 
		mounted() {
			// this.getData();
			this.getList()
		},
		components:{
			industry1Ec,
			industry1Ecb
		}
	} 
</script>


<style lang="stylus" rel='stylesheet/stylus' scoped>
	@import "~@/assets/industry1.styl"
</style>
